<template>
  <view class="content ft36 dlc-bg">
    <view class="price-title ft42">选择充值金额</view>
    <view class="flex flex-wrap">
     <view @click="selPrice(index,item.rechargeId,item.amount)"
		   v-bind:id="index" class="priceBtn radius-16 "
		   :style="selPriceClass[index]"
		   v-for="(item,index) in list"
		   :key="item.rechargeId" >
        <view class="priceTle">{{item.amount/100}}元</view>
        <view class="priceBot radius-8 ft28" v-if="item.givenAmount!=0">送{{item.givenAmount/100}}元</view>
      </view>
    </view>

    <view class="mg100-x ">
      <i-button @click="toWxPay" type="primary" shape="circle" >微信充值</i-button>
    </view>
    <i-modal title="提示" :visible="visible1" :okText="oktxt" @ok="toPay" @cancel="visible1 = false">
      <view class="inner pd40-x pd6-y">请确认充值{{amount/100}}元</view>
    </i-modal>
     <i-message id="message" />
  </view>
</template>

<script>
import { authorization,addUserRecharge, rechargeList } from "@/api";
import store from "@/store";
const { $Message } = require("@/wxcomponents/iview/base/index");
export default {
  data() {
    return {
      // loading: false,
      visible1: false,						//充值二次确认弹框
      oktxt: "确定",
      // 充值金额
      list: [
       {
            "rechargeId": 2,
            "amount": 2,
            "givenAmount": 1,
            "isFlag": 1,
            "ctime": "2019-12-05T03:45:49.000+0000"
        }
      ],
      // 选择金额样式
      selPriceClass: ["","","","","",""],
      rechargeId:null,										//  充值Id
      amount:null,											// 充值金额
      payData:{},
      equipmentNumber:"",
      mouthNo:"",

    };
  },
  methods: {
    // 充值
    async toWxPay() {
      if(this.amount > 0)
		this.visible1 = true;
      if(this.rechargeId == null) {
        $Message({
            content:"请选择充值金额",
            type: "error",
            duration:3
          })
      } else {
          //调用服务器接口
       const{ data } = await addUserRecharge({rechargeId:this.rechargeId }); 
       this.payData = data.data														//返回支付参数
      }
    },
    //  充值提示
    toPay() {
      this.visible1 = false;
      this.pay(this.payData);
    },
    // 选择变色
    selPrice(index,rechargeId,amount) {
      this.selPriceClass = ["", "", "", "", "", ""];
      for (let i = 0; i <= this.list.length; i++) {
        if (i == index) {
          this.selPriceClass[i] = "border:2rpx solid #fff;background-color :#3e87f0;color:#fff;";
        }
      }
      this.amount = amount
      this.rechargeId = rechargeId
    },

    // 获取充值列表
    async getlist() {
        //调用服务器接口
       const { data } = await rechargeList();
       this.list = data.data
       if(this.list.length == 0){
          $Message({
            content:"该地区暂无充值套餐",
            type: "error",
            duration:3
          })
      }
    },
    // 微信支付
    async pay(data) {
      wx.requestPayment({
        ...data,
        success: async res => {
          $Message({
            content:"支付成功",
            type: "success",
            duration:2
          })
          
         if(this.equipmentNumber){
            setTimeout(()=>{
           uni.navigateBack({
              url: `/pagesA/order/inputCode`
           })
          // uni.navigateBack({
          //  delta: 1   mouthNo
          // });
         },2000)  
         } else{
          setTimeout(()=>{
          // uni.navigateBack({
          //   delta:3
          //  });
          uni.switchTab({
            url: '/pages/personal/index'
             });
         },1000)  
         }
        },
        fail: err => {
        
        }
      });
    },

    hasPhone() {
      if (!this.userInfo.userPhone) {
        this.visible1 = true;
      } else {
        this.visible2 = true;
      }
    },
    toBindPhone() {
      uni.navigateTo({
        url: `/pagesA/login/index?number=${this.number}`
      });
    },
    // async fetchData() {
    //     //调用服务器接口
    //   const { data } = await getUserWithdrawList({ ...this.query });
    //   if (data.code === 1) {
    //     let { records, total } = data.data;
    //     records = records.map(i => {
    //       return {
    //         ...i
    //       };
    //     });
    //     this.list = this.list.concat(records);
    //     let len = this.list.length;
    //     if (len >= total) {
    //       this.scrollerObj.isEnd = true;
    //     }
    //   }
    // },
  },
  onLoad (option) {
    if(option.equipmentNumber){
      this.equipmentNumber=option.equipmentNumber 
    }
    if(option.mouthNo){
      this.mouthNo=option.mouthNo
    }
   
    // this.type = this.$root.$mp.query.type
    // if(this.type == 1){
    //   this.visible2 = true
    // }
    // if(this.$root.$mp.query.number){
    //   this.number = this.$root.$mp.query.number
    // }
  },
  onShow(){
  // 获取价格列表
    this.getlist()
  },
  computed: {
    // userInfo () {
    //   console.log("userInfo-----",store.state.user.userInfo)
    //   return store.state.user.userInfo
    // }
  },
   onPullDownRefresh() {
    try {
      this.amount = null
      this.rechargeId = null
      this.selPriceClass = ["", "", "", "", "", ""];
      this.list = []
      this.getlist()
    } catch (e) {
      // error
    }
    // this.getDeviceInfo();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
};
</script>
<style lang="stylus" scoped>
.content {
  text-align: center;
  width: 100%;
  height: 100vh;
}

.price-title {
  height: 120rpx;
  width: 100%;
  line-height: 120rpx;
}

.priceBtn {
  float: left;
  box-sizing: border-box;
  border: 1rpx solid #3e87f0;
  height: 150rpx;
  width: 45%;
  margin: 20rpx 2.5%;
  text-align: center;
  line-height: 150rpx;
}

.priceTle {
  width: 100%;
  height: 110rpx;
}

.priceBot {
  width: 60%;
  height: 40rpx;
  float: right;
  line-height: 40rpx;
  font-size: 30rpx;
  background-color: #ff4518;
  color: #fff;
}

.priceBtnSel {
  border: 1rpx solid #fff;
  background-color: #3e87f0;
  color: #fff;
}

/deep/.i-modal-mask {
  z-index: 9999 !important;
}
</style>